<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{info.name}}</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		<block v-if="tabIndex == 0">
		<view class="panel-body bg-white margin-top-sm padding">
			<view class="flex justify-between">
				<view>
					<view>ID：{{info.id||'-'}}</view>
					<view class="text-lg text-bold margin-top-sm title">{{info.name||'-'}}</view>
					<button class="cu-btn bg-orange margin-top-sm" @click="toUpdate()" v-if="!info.userItem">
						<text class="cuIcon-edit margin-right-sm"></text>编辑</button>
				</view>
				<view class="solids">
					<image :src="placeImgUrl" mode="aspectFill" @error="bindImgError('placeImg')"></image>
				</view>
			</view>
			<view class="flex justify-between margin-top">
				<view>网点类型</view>
				<view>{{info.typeNames}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>网点地区</view>
				<view>{{info.province+'-'+info.city+'-'+info.cityArea}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>详细地址</view>
				<view>{{info.address  || '---'}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>路线信息</view>
				<view>{{info.routeInfo || '---'}}</view>
			</view>
			<view class="flex justify-around margin-top solid-top solid-bottom padding">
				<view class="text-center">
					<view>部署设备</view>
					<view class="text-xl text-black margin-top">{{info.deviceCount || 0 }}</view>
				</view>
				<view class="solid-right"></view>
				<view class="text-center">
					<view>在线设备</view>
					<view class="text-xl text-black margin-top">{{info.onlineDeviceCount || 0}}</view>
				</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>联系电话</view>
				<view>{{info.contactPhone || '---'}}</view>
			</view>
			<view class="flex justify-between margin-top">
				<view>营业开始时间</view>
				<view>{{info.openTime || '00:00'}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>营业结束时间</view>
				<view>{{info.closeTime || '23:59'}}</view>
			</view>
			<view class="flex justify-between margin-top-sm">
				<view>网点创建时间</view>
				<view>{{info.createDate}}</view>
			</view>
		</view>
		<view class="cu-card no-card margin-top bg-white" v-if="info.userItem">
			<view class="cu-item padding">
			   <view>网点关系：{{info.userItem.roleTypeName}}</view>
			   <view class="margin-top-xs">加入时间：{{info.userItem.createDate}}</view>
			   <view class="profit-info margin">
				   <view class="flex justify-between solid-bottom padding-top-sm" v-for="(profit,profitIndex) in info.userItem.incomeRatioItems">
						<view>{{profit.businessTypeName}}</view>
						<view>{{profit.incomeRatio}}%</view>
				   </view>
			   </view>
		   </view>
		</view>
		</block>
	    <!-- 网点业务 -->
		<view class="list-body cost-list-body" v-if="tabIndex == 1">
			<scroll-view scroll-y="true">
				<view class="cu-card" v-for="(item,index) in busiConfigList" :key="index">
					<view class="cu-item padding-top padding-left padding-right">
						<view class="flex justify-between padding-bottom-sm solid-bottom">
							<view>业务类型</view>
							<view class="text-orange">{{item.businessTypeName}}</view>
						</view>
						<block v-if="item.businessType == 'CDB'">
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费模版</view>
								<view>{{item.title || '平台全局模版'}}</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>押金</view>
								<view>{{item.depositPrice}}元</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费标准</view>
								<view>{{item.payIntervalPrice}}元/小时</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>日最大收费</view>
								<view>{{item.dayMaxPrice}}元</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>免费时长</view>
								<view>{{item.freeTimes}}分钟</view>
							</view>
						</block>
						<!-- 充电插座 -->
						<block v-if="item.businessType == 'CDCZ'">
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费模版</view>
								<view>{{item.title || '平台全局模版'}}</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>钱包最低额度</view>
								<view>{{item.minWalletPrice}}元</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>最大充电时间</view>
								<view>{{item.maxChargeTimesMinute}}分钟</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>最大充电电量</view>
								<view>{{item.maxChargeElectricity}}</view>
							</view>
						</block>
						<block v-if="item.businessType == 'BXSCN'">
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费模版</view>
								<view>{{item.title || '平台全局模版'}}</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>押金</view>
								<view>{{item.depositPrice}}元</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费标准</view>
								<view>{{item.payIntervalPrice}}元/小时</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>日最大收费</view>
								<view>{{item.dayMaxPrice}}元</view>
							</view>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>免费时长</view>
								<view>{{item.freeTimes}}分钟</view>
							</view>
						</block>
						<block v-if="item.businessType == 'BXSCNShop'">
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>收费模版</view>
								<view>{{item.title || '平台全局模版'}}</view>
							</view>
						</block>
						<block v-if="item.businessType == 'PCL'">
							<block v-for="(devTypeItem, devTypeIndex) in item.items">
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>设备：{{devTypeItem.deviceTypeName}}</view>
								<view>{{devTypeItem.feeTemplateName || '平台全局模版'}}</view>
							</view>
							</block>
							<view class="flex justify-between padding-top-sm padding-bottom-sm solid-bottom">
								<view>其它便捷线充类型</view>
								<view>平台全局模版</view>
							</view>
						</block>
					    <view class="flex justify-end margin-top-sm" v-if="!info.userItem">
						    <button class="cu-btn round line-red margin-sm" @click="btnBusiConfigDel(item)">删除</button>
							<button class="cu-btn round line-grey margin-sm" @click="toCostChange(item)">切换收费模版</button>
					    </view>
				   </view>
				</view>
				<view class="foot" v-if="busiConfigList && busiConfigList.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer" v-if="!info.userItem">
			    <button class="cu-btn bg-orange shadow-blur round" @click="btnBusiConfigAdd()">新增业务类型</button>
			</view>
		</view>
		<!-- 网点设备类型 -->
		<view class="list-body" v-if="tabIndex == 2">
			<view class="cu-bar bg-white margin-top-sm">
				<view class="action">具体的设备信息</view>
				<view class="action"><button class="cu-btn bg-orange sm" @click="toPlaceDeviceList()">查看详情</button></view>
			</view>
			<scroll-view scroll-y="true">
				<view class="cu-card article" v-for="(item,index) in deviceTypeDataList" :key="index">
					<view class="cu-item padding-sm">
					   <view class="content">
						   <image :src="item.deviceTypeImg?item.deviceTypeImg:'/static/yonghu.png'" mode="aspectFill"></image>
						   <view class="text-cut">
							   <view class="text-cut text-orange">设备类型：{{item.deviceTypeName}}</view>
							   <view>联网类型：{{item.networkTypeName}}</view>
							   <view>功能模块：{{item.funcCodeNames}}</view>
							   <view>设备数量：{{item.deviceCount}}</view>
						   </view>
					   </view>
				   </view>
				</view>
				<view class="foot" v-if="deviceTypeDataList && deviceTypeDataList.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer" v-if="info.canDeploy">
			    <button class="cu-btn bg-orange shadow-blur round" @click="btnDeploy()">部署设备</button>
			</view>
		</view>
		<!-- 白名单 -->
		<view class="list-body" v-if="tabIndex == 3">
			<scroll-view scroll-y="true">
				<view class="cu-card device" v-for="(item,index) in freeMemberDataList" :key="index">
					<view class="cu-item padding">
					   <view class="text-orange text-lg padding-bottom-xs">手机号：{{item.phone}}</view>
					   <view>描述：{{item.note || '---'}}</view>
					   <block v-if="item.memberId">
						   <view>会员ID：{{item.memberId}}</view>
						   <view>会员昵称：{{item.memberNickname || '---'}}</view>
						   <view>激活时间：{{item.activeDate}}</view>
					   </block>
					   <view v-else>激活时间：未激活</view>
					   <view>创建时间：{{item.createDate}}</view>
					   <view class="flex justify-end margin-top-sm" v-if="info.editFreeMember">
						   <button class="cu-btn line-red sm" @click="btnDelFreeMember(item)">删除</button>
					   </view>
				   </view>
				</view>
				<view class="foot" v-if="freeMemberDataList && freeMemberDataList.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer" v-if="info.editFreeMember">
			    <button class="cu-btn bg-orange shadow-blur round" @click="toAddFreeMember()">新增白名单</button>
			</view>
		</view>
		<!-- 店员管理 -->
		<view class="list-body" v-if="tabIndex == 4">
			<scroll-view scroll-y="true">
				<view class="cu-card device" v-for="(item,index) in clerkDataList" :key="index">
					<view class="cu-item padding">
					   <view class="text-orange text-lg">姓名：{{item.userName}}</view>
					   <view>手机号：{{item.userPhone}}</view>
					   <view>创建时间：{{item.createDate}}</view>
					   <view class="flex justify-end margin-top-sm" v-if="info.editClerk">
						   <button class="cu-btn line-red sm" @click="btnDelClerk(item)">删除</button>
					   </view>
				   </view>
				</view>
				<view class="foot" v-if="clerkDataList && clerkDataList.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer" v-if="info.editClerk">
			    <button class="cu-btn bg-orange shadow-blur round" @click="toAddClerk()">新增店员</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeId:null,
				placeImgUrl:'/static/logo.jpg',
				info:{
					name:"网点名称",
					province:'广东',
					city:'广州',
					cityArea:'天河区'
				},
				tabListData:["基础信息","计费信息","设备信息","白名单","店员管理"],
				tabIndex:0,
				
				busiConfigList:[],
				deviceTypeDataList:[],
				deviceDataList:[],
				freeMemberDataList:[],
				clerkDataList:[],
				
				modalName:null
			};
		},
		onLoad(option) {
			this.placeId = option.id;
		},
		onShow(){
			console.log("tabIndex = " + this.tabIndex)
			if(this.tabIndex == 5){
				this.tabIndex = 0;
			}else if(this.tabIndex == 0){
				this._loadInfo();
			}else if(this.tabIndex == 1){
				this._loadBusiConfigDataList();
			}else if(this.tabIndex == 2){
				this._loadDeviceTypeDataList();
			}else if(this.tabIndex == 3){
				this._loadFreeMemberDataList();
			}else if(this.tabIndex == 4){
				this._loadClerkDataList();
			}
		},
		methods: {
			_loadInfo:function(){
				if(this.placeId){
					uni.showLoading({
						title:'处理中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.placeInfo,{
						placeId:this.placeId
					},res=>{
						console.log(res);
						uni.hideLoading();
						if(res.code==200){
							_self.info = res.body;
							if(_self.info.imgUrl){
								_self.placeImgUrl = _self.info.imgUrl;
							}
							if(!_self.info.userItem){
								if(_self.tabListData.length == 5){
									_self.tabListData.push("分成信息");
								}
							}
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false,
								complete:function(){
									uni.navigateBack();
								}
							});
						}else {
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							});
							setTimeout(function(){
								uni.navigateBack();
							},1000);
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					});
					setTimeout(function(){
						uni.navigateBack();
					},1000);
				}
			},
			_loadBusiConfigDataList:function(){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeBusiConfigList,{
					placeId:this.placeId
				},res=>{
					console.log(res);
					uni.hideLoading();
					if(res.code == 200 || res.code == 202){
						_self.busiConfigList = res.body.items||[];
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			_loadDeviceTypeDataList:function(){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeDeviceTypeList,{
					placeId:this.placeId
				},res=>{
					console.log(res);
					uni.hideLoading();
					if(res.code == 200 || res.code == 202){
						_self.deviceTypeDataList = res.body.items||[];
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			_loadFreeMemberDataList:function(){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeFreeMemberList,{
					placeId:this.placeId
				},res=>{
					console.log(res);
					uni.hideLoading();
					if(res.code == 200 || res.code == 202){
						_self.freeMemberDataList = res.body.items||[];
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			_loadClerkDataList:function(){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeClerkList,{
					placeId:this.placeId
				},res=>{
					console.log(res);
					uni.hideLoading();
					if(res.code == 200 || res.code == 202){
						_self.clerkDataList = res.body.items||[];
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			bindImgError:function(type,index){
				if(type == 'placeImg'){
					this.placeImgUrl = '/static/logo.jpg';
				}
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				if(index == 1){
					this._loadBusiConfigDataList();
				}else if(index == 2){
					this._loadDeviceTypeDataList();
				}else if(index == 3){
					this._loadFreeMemberDataList();
				}else if(index == 4){
					this._loadClerkDataList();
				}else if(index == 5){
					const info = this.info;
					uni.navigateTo({
						url:'./user/config',
						success: function(res) {
						    // 通过eventChannel向被打开页面传送数据
						    res.eventChannel.emit('fromData', {placeId:info.id,placeName:info.name})
						}
					})
				}
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			btnDeploy:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./device/deploy',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', { placeId:info.id,placeName:info.name })
					}
				})
			},
			btnUndeploy:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要移除【'+item.deviceSn+'】设备吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeDeviceUndeploy,{
								deviceSn:item.deviceSn
							},res=>{
								console.log(res);
								if(res.code == 200){
									uni.showToast({
										title:'移除成功',
										icon:'success'
									});
									_self._loadDeviceTypeDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					},
				})
			},
			btnBusiConfigDel:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要删除【'+item.businessTypeName+'】业务吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeBusiDel,{
								placeId:_self.placeId,
								businessType:item.businessType
							},res=>{
								console.log(res);
								if(res.code==200){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									});
									_self._loadBusiConfigDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			},
			btnBusiConfigAdd:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./cost/edit',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('fromData', {
							placeId:info.id,
							placeName:info.name
						})
					}
				})
			},
			btnDelFreeMember:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要删除【'+item.phone+'】手机号的白名单吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeFreeMemberDel,{
								placeId:_self.placeId,
								phone:item.phone
							},res=>{
								console.log(res);
								if(res.code==200){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									});
									_self._loadFreeMemberDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			},
			toCostChange:function(item){
				const info = this.info;
				let url;
				if(item.businessType == 'BXSCN'){
					url = './cost/bxscn/change'
				}else if(item.businessType == 'BXSCNShop'){
					url = './cost/bxscn_shop/change'
				}else if(item.businessType == 'CDB'){
					url = './cost/cdb/change'
				}else if(item.businessType == 'CDCZ'){
					url = './cost/cdcz/change'
				}else if(item.businessType == 'PCL'){
					url = './cost/pcl/config'
				}
				
				if(url){
					uni.navigateTo({
						url:url,
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('fromData', {
								placeId:info.id,
								placeName:info.name,
								businessType:item.businessType,
								businessTypeName:item.businessTypeName,
								title:item.title,
								feeTemplateId:item.feeTemplateId
							})
						}
					})
				}else{
					uni.showModal({
						title:'温馨提示',
						content:'不支持的业务类型',
						showCancel:false
					});
				}
			},
			toUpdate:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./edit',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('fromData', info)
					}
				})
			},
			toAddFreeMember:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./free_member/edit',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('fromData', {
							placeId:info.id,
							placeName:info.name
						})
					}
				})
			},
			toAddClerk:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./clerk/edit',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('fromData', {
							placeId:info.id,
							placeName:info.name
						})
					}
				})
			},
			btnDelClerk:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要删除【'+item.userName+'】的店员吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeClerkDel,{
								placeId:_self.placeId,
								userId:item.userId
							},res=>{
								console.log(res);
								if(res.code==200){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									});
									_self._loadClerkDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			},
			toPlaceDeviceList:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./device/list',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('fromData', {
							placeId:info.id,
							placeName:info.name,
							canDeploy:info.canDeploy
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}

.container .panel-body image{width:200rpx;height:200rpx;}
.container .panel-body .title{width:60vw;}

.container .list-body scroll-view{height:85vh;}

.container .list-body .cu-card.article>.cu-item{font-size:26rpx;margin:15rpx 15rpx 0 15rpx;}
.container .list-body .cu-card.article>.cu-item .content>image{width:160rpx;height:160rpx;}

.container .cost-list-body .cu-card>.cu-item{margin-bottom:0;}

.container .cu-card.device>.cu-item{position:relative;margin-bottom:0;}
.container .cu-card.device .state-info{position:absolute;top:15rpx;right:25rpx;}
.container .list-footer{position:fixed;bottom: 0;left:0;right:0;}
</style>